<template>
	<view class="box">
	<uNavbar title="" bgColor="transparent"></uNavbar>
		<view class="main">
			<view class="top">
				<image src="../../static/image/cardimage.png" mode=""></image>
				<view class="name">
					遣唐使
				</view>
				<view class="time">
					活动时间：2024-07-01~2024-10-32
				</view>
				<view class="tip_wrap">
					<text>剩余次数：0</text>
					<text>个人上限：0</text>
				</view>
			</view>
			<view class="tit">
				挖宝条件
			</view>
			<view class="term">
				<image src="../../static/image/bg1.png" mode=""></image>
				<view class="term_name">
					遣唐使
				</view>
				<view class="term_num">
					0/1
				</view>
			</view>
			<view class="term">
				<image src="../../static/image/bg1.png" mode=""></image>
				<view class="term_name">
					遣唐使
				</view>
				<view class="term_num">
					0/1
				</view>
			</view>
			<view class="tit">
				挖宝周期60天
			</view>
			
		</view>
		<view class="item_wrap">
			<view class="title">
				奖励预览
			</view>
			<view class="item">
				<image src="../../static/image/bg1.png" mode=""></image>
				<view class="item_name">
					qdqwd
				</view>
				<view class="item_tag">
					30天一张
				</view>
			</view>
		</view>
		<view class="item_wrap" style="margin-top: 36rpx;">
			<view class="title">
				总奖励
			</view>
			<view class="item">
				<image src="../../static/image/bg1.png" mode=""></image>
				<view class="item_name">
					qdqwd
				</view>
				<view class="item_tag">
					30天一张
				</view>
			</view>
		</view>
		<view style="width: 750rpx;height: 400rpx;">
			
		</view>
		<view class="btn_wrap">
			<view class="btn_wrap_tit">
				挖宝分数
			</view>
			<u-number-box class="numberbox" v-model="num"  bgColor="#353064" iconStyle="color: #fff" color="#ffffff" @change="valChange"></u-number-box>
			<view class="btn">
				开始挖宝
			</view>
			<view class="tip">
				藏品挖宝期间不可转赠、交易
			</view>
		</view>
	</view>

</template>

<script>

	export default {
		data() {
			return {
				num:1
			}
		},
		onLoad() {
		
		},
		methods: {
			valChange(e){
				console.log(e)
			}
		}
	}
</script>
<style>
	page {
		background: #211E38;
	}
</style>

<style lang="scss" scoped>
	
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.box {
		width: 750rpx;
		// height: 1624rpx;
		// background-color: #211E38;
		position: relative;
	}
	.main{
		position: relative;
		top: -70rpx;
		width: 750rpx;
		height: 1380rpx;
		background-image: url("/static/image/wdd.png");
		background-size: 750rpx 1380rpx;
		.top{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 80rpx;
			>image{
				width: 266rpx;
				height: 502rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}
			.name{
				margin-top: 52rpx;
				font-family: iconfont;
				font-weight: 700;
				font-size: 52rpx;
				color: #FFFFFF;
			}
			.time{
				margin-top: 36rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
			}
			.tip_wrap{
				width: 670rpx;
				height: 66rpx;
				background: #211A3D;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				margin-top: 36rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				>text{
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
				}
			}
		}
	}
	.tit{
		font-family: iconfont;
		font-weight: 700;
		font-size: 52rpx;
		color: #FFFFFF;
		margin-left: 44rpx;
		margin-top: 46rpx;
	}
	.term{
		margin: 0 auto;
		margin-top: 36rpx;
		width: 670rpx;
		height: 122rpx;
		background: rgba(255,255,255,0.1);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		align-items: center;
		position: relative;
		>image{
			width: 94rpx;
			height: 94rpx;
			border-radius: 50%;
			margin-left: 28rpx;
		}
		.term_name{
			font-family: iconfont;
			font-weight: 400;
			font-size: 34rpx;
			color: #FFFFFF;
			position: absolute;
			top: 24rpx;
			left: 138rpx;
		}
		.term_num{
			position: absolute;
			left: 138rpx;
			bottom: 24rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
	.item_wrap{
		width: 670rpx;
		height: 408rpx;
		background: #2D244D;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		.title{
			padding-top: 22rpx;
			margin-left: 22rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
		}
		.item{
			margin-top: 24rpx;
			margin-left: 32rpx;
			width: 192rpx;
			height: 268rpx;
			background: #3A2D62;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;
			>image{
				width: 192rpx;
				height: 204rpx;
			}
			.item_name{
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				width: 192rpx;
				 white-space: nowrap; /* 文本不换行 */
				  overflow: hidden; /* 溢出隐藏 */
				  text-overflow: ellipsis; /* 使用省略号 */
			}
			.item_tag{
				position: absolute;
				top: 16rpx;
				right: 0rpx;
				width: 126rpx;
				height: 38rpx;
				background: rgba(0,0,0,0.8);
				border-radius: 470rpx 0rpx 0rpx 470rpx;
				font-weight: 400;
				font-size: 20rpx;
				line-height: 38rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
	.btn_wrap{
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
		height: 336rpx;
		background: #2D244D;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		.btn_wrap_tit{
			padding-top: 48rpx;
			margin-left: 30rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
		}
		.numberbox{
			position: absolute;
			right: 52rpx;
			top: 42rpx;
		}
		.btn{
			margin: 0 auto;
			margin-top: 52rpx;
			width: 670rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
			background: linear-gradient( 274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
			border-radius: 582rpx 582rpx 582rpx 582rpx;
			opacity: 0.5;
		}
		.tip{
			width: 670rpx;
			margin: 0 auto;
			text-align: center;
			margin-top: 26rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #A6A5AF;
		}
	}
</style>